<template>
  <div class="box">
    <p class="Count">实时游客统计</p>
    <p class="top-img"></p>
    <p class="Number">可预约总量<span>38990</span>人</p>
    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
      <span>人</span>
    </div>
    <div class="charts" ref="shuqiu"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// 引入echarts
import * as echarts from "echarts";
import "echarts-liquidfill";
let people = ref<any>("21680");
let shuqiu = ref();
//挂载时使用echarts绘图
onMounted(() => {
  let Mycharts = echarts.init(shuqiu.value);
  Mycharts.setOption({
    series: [
      {
        type: "liquidFill",
        radius: "90%",
        data: [0.6, 0.5, 0.4, 0.3],
        color: ["skyblue", "#0f0", "rgb(0, 0, 255)"],
        itemStyle: {
          opacity: 0.6,
        },
        emphasis: {
          itemStyle: {
            opacity: 0.9,
          },
        },
        backgroundStyle: {
          color: "#E3F7FF",
        },
        outline: {
          show: true,
          borderDistance: 8,
          itemStyle: {
            color: "skyblue",
            borderColor: "#294D99",
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: "rgba(0, 0, 0, 0.25)",
          },
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.box {
  background-color: #fff;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  color: white;
  .top-img {
    margin-left: 20px;
    width: 67px;
    height: 7px;
    margin-top: 10px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: 100% 100%;
  }
  .Number {
    float: right;
    font-size: 17px;
    span {
      color: yellowgreen;
    }
  }
  .Count {
    margin-left: 20px;
    font-size: 20px;
  }
  .number {
    display: flex;
    margin-top: 28px;
    background-color: black;
    span {
      flex: 1;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
</style>
